import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { Toast } from 'antd-mobile'
import PropTypes from 'prop-types'
import { createAction, NavigationActions } from '../../../../utils'
import screen from '../../../../utils/screen'

export default class extends PureComponent {
  static propTypes = {
    content: PropTypes.any,
    timeD: PropTypes.any,
    xtype: PropTypes.any
  }


  constructor(props) {
    super(props)
    this.k = 0
  }

  render() {
    const { content } = this.props;
    return (
      <View>
        {
          content && content.map((v, i) => {
            return this.renderSingleLine(v, i, 1)
          })
        }
      </View>
    )
  }

  getNextNum = () => {
    return ++this.k
  }

  invokeClick = (line) => {
    const linked = line.linked
    const fullParams = Object.assign({}, linked, {
      timeD: this.props.timeD,
      xtype: this.props.xtype
    })
    console.log("fullParams ", fullParams)
    if(line.linked !== undefined) {
      this.props.navigation.navigate(linked.linkedName, fullParams)
    }
  }

  renderSingleLine = (line = {}, i, level = 1) => {
    const nextNum  = this.getNextNum()
    const additionalStyle = nextNum % 2 === 0 ? styles.lineA : styles.lineB
    // console.log('line is ', line)
    let showDetail = false
    if(line.linked && line.linked.isDetails == 1) {
      showDetail = true
    }
    return (
      <View key={i}>
        <View style={[styles.line, additionalStyle]}>
          <View style={[styles.lineCell, styles.one, {paddingLeft: screen.pxToDp(31 + level * 30)}]}>
            {
              !showDetail ?
                <Text style={line.style || {}} onLongPress={() => {Toast.info(line.name)}} numberOfLines={1}>{line.name}</Text>
                 :
                <TouchableOpacity activeOpacity={0.5}  onPress={() => {this.invokeClick(line)}} onLongPress={() => {Toast.info(line.name)}} >
                  <Text style={{color: 'red',textDecorationLine: 'underline'}} numberOfLines={1}>{line.name}</Text>
                </TouchableOpacity>
            }
          </View>
          <View style={[styles.lineCell, styles.two]}>
            <Text>{line.amount}</Text>
          </View>
          <View style={[styles.lineCell, styles.three]}>
            <Text>{line.yoy}</Text>
          </View>
          <View style={[styles.lineCell, styles.three]}>
            <Text >{line.qoq}</Text>
          </View>
        </View>
        {
          line.children && line.children.map((v, j) => {
            return this.renderSingleLine(v, i + j + 1, level + 1)
          })
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  line: {
    backgroundColor: 'white',
    height: screen.pxToDp(70),
    flexDirection: 'row'
  },
  lineFont: {
    color: '#636363',
    fontSize: screen.pxToDp(30)
  },
  lineCell: {
    justifyContent: 'center',
    marginHorizontal:screen.pxToDp(5)
  },
  lineA: {
    backgroundColor: '#f0f6fe'
  },
  lineB: {
    backgroundColor: '#fdfdfd'
  },
  one: {
    width: screen.pxToDp(260)
  },
  two: {
    flex: 3
  },
  three: {
    flex: 2
  }
})
